<style scoped>
  /*.row_style{
    margin-bottom: 12px;
  }*/
  .input_size{
    min-width: 100px;
  }
  .style_inline{
    display: inline-block;
  }
  .input_companyName{
    margin-right: 0px;
  }
  /*.input_credit_code{
    padding-right: 44px;
  }*/
  .font_right{
    text-align: right;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .up_left{
    text-align: left;
  }
  .company_table{
    width: 80%;
    height: auto;
  }
  .table_style{
    margin: 0 auto;
  }
  .search{
    margin-bottom: 20px;
  }
</style>
<template>

  <div class="gs_content">
    <Steps :current="current" style="padding-bottom: 20px;">
      <Step title="步骤1"></Step>
      <Step title="步骤2"></Step>
      <Step title="步骤3"></Step>
      <Step title="步骤4"></Step>
    </Steps>
    <div class="row_style">
      <Row>
        <Col span="12">
        <div class="input_cell input_companyName">
          <Row>
            <Col span="6" class="font_right">&nbsp;</Col>
            <Col span="8">
            <Input class="search" v-model="searchName" placeholder="输入公司名称查询"></Input>
            </Col>
            <Col span="10" class="up_left">
            <router-link :to="{name:'gsInfoTable',params:{searchName}}"><Button type="success" @click="search()">查询</Button></router-link>
            </Col>
          </Row>
        </div>
        </Col>
        <Col span="12">

        </Col>
      </Row>
    </div>
    <Form ref="formData" :model="formData" :rules="ruleDate">
      <div class="row_style">
        <Row>
          <Col span="12">
          <div class="input_cell input_companyName">
            <Row>
              <FormItem prop="companyName">
                <Col span="6" class="font_right">公司名称:</Col>
                <Col span="8">
                <Input class="input_size" v-model="formData.companyName" placeholder="公司名称"></Input>
                </Col>
                <Col span="10" class="up_left">
                  <!--<Upload action="//jsonplaceholder.typicode.com/posts/">
                    <Button type="ghost" icon="ios-cloud-upload-outline">上传证照</Button>
                  </Upload>-->
                <upload-pictures :companyId="companyId"></upload-pictures>
                </Col>
              </FormItem>
            </Row>
          </div>
          </Col>
          <Col span="12">
          <div class="input_cell">
            <Row>
              <FormItem prop="companyBirthday">
                <Col span="8" class="font_right">成立时间:</Col>
                <Col span="8" class="up_left"><Date-picker class="input_size" type="date" v-model="formData.companyBirthday" placeholder="选择日期"></Date-picker></Col>
                <Col span="8"></Col>
              </FormItem>
            </Row>
          </div>
          </Col>
        </Row>
      </div>
      <div class="row_style">
        <Row>
          <Col span="12">
          <div class="input_cell">
            <Row>
              <FormItem prop="creditCode">
                <Col span="6" class="font_right">统一社会信用代码:</Col>
                <Col span="8" class="up_left"><Input class="input_size" v-model="formData.creditCode" placeholder="信用代码"></Input></Col>
                <Col span="10"></Col>
              </FormItem>
            </Row>
          </div>
          </Col>
          <Col span="12">
          <div class="input_cell">
            <Row>
              <FormItem prop="registerAddress">
                <Col span="8" class="font_right">注册地址:</Col>
                <Col span="8" class="up_left"><Cascader class="input_size style_inline" :data="formData.registerAddressData" v-model="formData.registerAddress"></Cascader></Col>
                <Col span="8"></Col>
              </FormItem>
            </Row>
          </div>
          </Col>
        </Row>
      </div>
      <div class="row_style">
        <Row>
          <Col span="12">
          <div class="input_cell">
            <Row>
              <FormItem prop="neiwaizi">
                <Col span="6" class="font_right">内 外 资 :</Col>
                <Col span="8" class="up_left">
                <Select class="input_size" v-model="formData.neiwaizi">
                  <Option v-for="item in formData.neiwaiziData" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
                </Col>
                <Col span="10"></Col>
              </FormItem>
            </Row>
          </div>
          </Col>
          <Col span="12">
          <div class="input_cell">
            <Row>
              <FormItem prop="managementRange">
                <Col span="8" class="font_right">经营范围:</Col>
                <Col span="8" class="up_left">
                <Input v-model="formData.managementRange" class="input_size" placeholder="经营范围"></Input>
                </Col>
                <Col span="8"></Col>
              </FormItem>
            </Row>
          </div>
          </Col>
        </Row>
      </div>
      <div class="row_style">
        <Row>
          <Col span="12">
          <div class="input_cell">
            <Row>
              <FormItem prop="enterpriseNature">
                <Col span="6" class="font_right">企业性质:</Col>
                <Col span="8" class="up_left">
                <Select class="input_size" v-model="formData.enterpriseNature">
                  <Option v-for="item in formData.enterpriseNaturedata" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
                </Col>
                <Col span="10"></Col>
              </FormItem>
            </Row>
          </div>
          </Col>
          <Col span="12">
          <div class="input_cell">
            <Row>
              <FormItem prop="registeredCapital">
                <Col span="8" class="font_right">注册资本:</Col>
                <Col span="8" class="up_left"><Input class="input_size" v-model="formData.registeredCapital" placeholder="注册资本"></Input></Col>
                <Col span="8"></Col>
              </FormItem>
            </Row>
          </div>
          </Col>
        </Row>
      </div>
      <div class="row_style">
        <Row>
          <Col span="12">
          <div class="input_cell">
            <Row>
              <FormItem prop="bankName">
                <Col span="6" class="font_right"> 基本户银行:</Col>
                <Col span="8"><Input class="input_size" v-model="formData.bankName" placeholder="银行名称"></Input></Col>
                <Col span="10"></Col>
              </FormItem>
            </Row>
          </div>
          </Col>
          <Col span="12">
          <div class="input_cell">
            <Row>
              <FormItem prop="bankIdCard">
                <Col span="8" class="font_right">基本户账号:</Col>
                <Col span="8"><Input class="input_size" v-model="formData.bankIdCard" placeholder="银行行号"></Input></Col>
                <Col span="8"></Col>
              </FormItem>
            </Row>
          </div>
          </Col>
        </Row>
      </div>
      <div class="row_style">
        <Row>
          <Col span="12">
          <div class="input_cell">
            <Row>
              <FormItem prop="legalPersonName">
                <Col span="6" class="font_right">法定代表人姓名:</Col>
                <Col span="8"><Input class="input_size" v-model="formData.legalPersonName" placeholder="姓名"></Input></Col>
                <Col span="10" class="up_left">
                <!--<Upload :show-upload-list='false'  class='style_inline' action="//jsonplaceholder.typicode.com/posts/">
                  <Button type="ghost" icon="ios-cloud-upload-outline">上传证照</Button>
                </Upload>-->
                <upload-pictures :companyId="companyId"></upload-pictures>
                </Col>
              </FormItem>
            </Row>
          </div>
          </Col>
          <Col span="12">
          <div class="input_cell">
            <Row>
              <FormItem prop="legalPersonId">
                <Col span="8" class="font_right">法人身份证:</Col>
                <Col span="8"><Input class="input_size" v-model="formData.legalPersonId" placeholder="身份证"></Input></Col>
                <Col span="8"></Col>
              </FormItem>
            </Row>
          </div>
          </Col>
        </Row>
      </div>
      <div class="row_style">
        <div class="">
          <Row>
            <Col span="24">
            <Row>
              <Col span="24">
              <Form-item style="margin:0 auto"
                         v-for="(item, index) in formData.gudong.items"
                         :key="index"
                         :label="'股东' + (index + 1)"
                         :prop="'gudong.items.' + index + '.gdName'"
                         :rules="{required: false, message: '股东' + (index + 1) +'不能为空', trigger: 'blur'}">
                <Row>
                  <Col span="3">
                  <Input type="text" v-model="item.name" placeholder="姓名"></Input>
                  </Col>
                  <Col span="3">
                  <Input type="text" v-model='item.idcard' placeholder="身份证"></Input>
                  </Col>
                  <Col span="3">
                  <Input type="text" v-model='item.percent' placeholder="持股比例"></Input>
                  </Col>
                  <Col span="2">
                  <!--<Upload action="//jsonplaceholder.typicode.com/posts/">
                    <Button type="ghost" icon="ios-cloud-upload-outline">上传证照</Button>
                  </Upload>-->
                  <upload-pictures :companyId="companyId"></upload-pictures>
                  </Col>
                  <Col span="1">
                  <Button type="ghost" @click="handleRemove(index)">删除</Button>
                  </Col>
                </Row>
              </Form-item>
              <Form-item>
                <Row>
                  <Col span="12">
                  <Button type="dashed" @click="handleAdd" icon="plus-round">新增</Button>
                  </Col>
                </Row>
              </Form-item>
              </Col>
            </Row>
            </Col>
          </Row>


        </div>
      </div>
      <div class="row_style">
        <Row>
          <Col span="24">
          <div class="input_cell">
            <Row>
              <FormItem>
                <Col span="12">
                <Button type="primary" @click="handleSubmit('formData')" v-show="!hasId">提交</Button>
                <Button type="primary" @click="handleSubmit('formData',companyId)" v-show="hasId">编辑提交</Button>
                <Button type="ghost" @click="handleReset('formData')" style="margin-left:20px">重置</Button>
                </Col>
              </FormItem>
            </Row>
          </div>
          </Col>
        </Row>
      </div>
      <!--<router-link to="/layout/steps"><Button type="success" long style="width: 200px">提交-下一步</Button></router-link>-->
    </Form>
    <!--<div class="company_table">
      <Table class='table_style' height="300" border :columns="companyCol" :data="companyInfo"></Table>
    </div>-->
    <router-link :to="{name:'companyServer',params:{current}}"><Button type="success" @click="next()">下一步</Button></router-link>
  </div>
</template>
<script>
  import store from '@/store'
  import { mapGetters } from 'vuex'
  import uploadPictures from '@/components/uploadPicture'

  export default {
    store,
    components: {
      //上传图片
      uploadPictures
    },
    data(){
      return{
        //公司id传值
        companyId:'',
        a:"",
        //是否有id
        hasId:false,
        //查询的值：name,将这个name传到pageTable中，表格通过name从数据库查询该值,动态显示
        searchName:'',
        //步骤现在steps
        current:0,
        //表单值
        formData:{
          //公司名称
          companyName:'',
          //公司成立时间
          companyBirthday:'',
          //社会统一信用代码
          creditCode:'',
          //注册地址
          registerAddress:['四川', '成都', '高新区'],
          //注册地址数据
          registerAddressData:[{
            value: '北京',
            label: '北京',
            children: [
              {
                value: '故宫',
                label: '故宫'
              },
              {
                value: '天坛',
                label: '天坛'
              },
              {
                value: '王府井',
                label: '王府井'
              }
            ]
          }, {
            value: '四川',
            label: '四川',
            children: [
              {
                value: '成都',
                label: '成都',
                children: [
                  {
                    value: '高新区',
                    label: '高新区',
                  },{
                    value: 'jinjiang',
                    label: '锦江区',
                  },{
                    value: '青羊区',
                    label: '青羊区',
                  },{
                    value: '金牛区',
                    label: '金牛区',
                  }, {
                    value: '武侯区',
                    label: '武侯区',
                  }, {
                    value: '成华区',
                    label: '成华区',
                  },{
                    value: '龙泉驿区',
                    label: '龙泉驿区',
                  },{
                    value: '青白江区',
                    label: '青白江区',
                  },{
                    value: '新都区',
                    label: '新都区',
                  },{
                    value: '温江区',
                    label: '温江区',
                  },{
                    value: '双流区',
                    label: '双流区',
                  },{
                    value: '郫都区',
                    label: '郫都区',
                  },
                ]
              },
              {
                value: '南充',
                label: '南充',
                children: [
                  {
                    value: '西华师大',
                    label: '西华师大',
                  },
                  {
                    value: '华凤',
                    label: '华凤',
                  }
                ]
              }
            ],
          }],
          //内外资
          neiwaizi:'',
          //内外资数据
          neiwaiziData:[
            {
              value: '内资',
              label: '内资'
            },
            {
              value: '外资',
              label: '外资'
            },
            {
              value: '外资',
              label: '国企'
            }
          ],
          //经营范围
          managementRange:'',
          //企业性质
          enterpriseNature:'',
          //企业性质数据
          enterpriseNaturedata:[
            {
              value: '公司',
              label: '公司'
            },
            {
              value: '公司',
              label: '个体'
            },
            {
              value: '民办非',
              label: '民办非'
            }
          ],
          //注册资本
          registeredCapital:'',
          //法人代表姓名
          legalPersonName:'',
          //法人代表ID：身份证
          legalPersonId:'',
          //股东信息
          gudong:{
            items:[
              {
                "idcard":'',
                "name":'',
                "percent":''
              }
            ]
          },
          //银行名称
          bankName:'',
          //银行卡号
          bankIdCard:'',
        },
        //验证,这个东西会跑到前面
        ruleDate:{
          /*//统一验证信息
           reg:[{required:true,message:'不能为空',tirgger:'blur'}],
           //公司名称
           companyName:[
           {required:true,message:'公司名称不能为空',trigger:'blur'}
           ],
           //公司成立时间
           companyBirthday:[
           {required:true,message:'请选择成立时间',trigger:'blur'}
           ],
           //统一社会信用代码
           creditCode:[
           {required:true,message:'信用代码为空',trigger:'blur'},
           {type:'email',message:'格式不正确',tirgger:'blur'}
           ],
           //注册地址
           registerAddress:[
           {required:true,message:'地址不能为空',trigger:'blur'}
           ],
           //内外资
           neiwaizi:[
           {required:true,message:'内外资不能为空',trigger:'blur'}
           ],
           //经营范围
           managementRange:[
           {required:true,message:'经营范围不能为空',tirgger:'blur'}
           ],
           //企业性质
           enterpriseNature:[
           {required:true,message:'请选择企业性质',tirgger:'blur'}
           ],
           //注册资本
           registeredCapital:[
           {required:true,message:'注册资本不能为空',tirgger:'blur'}
           ],
           //法人代表姓名
           legalPersonName:[
           {required:true,message:'法人姓名不能为空',tirgger:'blur'}
           ],
           //法人代表ID：身份证
           legalPersonId:[
           {required:true,message:'法人ID不能为空',tirgger:'blur'}
           ],
           //银行名称
           bankName:[
           {required:true,message:'银行不能为空',tirgger:'blur'}
           ],
           //银行卡号
           bankIdCard:[
           {required:true,message:'卡号不能为空',tirgger:'blur'}
           ],*/
        },
      }
    },
    methods:{
      ...mapGetters([
        // 在store.js 中注册的getters
        'showState'
      ]),
      //提交（新增or修改）
      handleSubmit (name,id) {
        console.log(id);
        var that = this;
        //根据id判断
        if(id){
          //修改功能
          var sub =
            {
              artificialPerson:this.formData.legalPersonName,
              artificialPersonIdcard:this.formData.legalPersonId,
              bankAccout:this.formData.bankIdCard,
              bankName:this.formData.bankName,
              creditCode:this.formData.creditCode,
              foundTime:this.formData.companyBirthday,
              mainBusiness:this.formData.managementRange,
              name:this.formData.companyName,
              nature:this.formData.enterpriseNature,
              registerAddress:this.formData.registerAddress,
              registeredCaptial:this.formData.registeredCapital,
              type:this.formData.neiwaizi,
              enterpriseId:id
              /*stockholders:[]*/
            }
          this.$refs[name].validate((valid) => {//将传进来的formValidate对象参数，进行校验（validate）,valid为true就是成功校验
            if (valid) {
              this.$Message.success('修改成功!');
              //输出查看sub数据格式
              //console.log(sub);
              //更新公司url
              var url = 'http://47.93.3.65:8081/api/enterprise/'+id
              //更新公司请求
              this.$http.put(url,sub).then((res)=> {
                //取出id
                var stockholders ={}
                //var id = id;
                //取出当前股东值
                var gdItems = that.formData.gudong.items;
                //console.log(gdItems);
                //每次取这个当前股东值得时候要吧当前股东的id加进去
                gdItems.map((item)=>{
                  //每次都map之后都重新设置提交的股东信息,并提交一次股东
                  stockholders = {
                    enterpriseId:id,
                    name:item.name,
                    idcard:item.idcard,
                    percent:item.percent,
                  }
                  //bug：修改的时候假如新增一个股东就会有问题
                  //获取要修改的股东的股东id
                  var stockholdersUrl ='http://47.93.3.65:8081/api/stockholder/'+item.stockholderId;
                  this.$http.put(stockholdersUrl,stockholders).then((res)=>{
                    console.log('更新股东成功')
                  }).catch((err)=>{
                    console.log(err);
                  })
                })
                console.log('更新表单提交成功');
              }).catch( (error)=> {
                console.log(error);
              })
            } else {
              this.$Message.error('更新表单验证失败!');
            }
          })
        }else {
          //新增功能
          var sub =
            {
              artificialPerson:this.formData.legalPersonName,
              artificialPersonIdcard:this.formData.legalPersonId,
              bankAccout:this.formData.bankIdCard,
              bankName:this.formData.bankName,
              creditCode:this.formData.creditCode,
              foundTime:this.formData.companyBirthday,
              mainBusiness:this.formData.managementRange,
              name:this.formData.companyName,
              nature:this.formData.enterpriseNature,
              registerAddress:this.formData.registerAddress,
              registeredCaptial:this.formData.registeredCapital,
              type:this.formData.neiwaizi,
              /*stockholders:[]*/
            }
          this.$refs[name].validate((valid) => {//将传进来的formValidate对象参数，进行校验（validate）,valid为true就是成功校验
            if (valid) {
              this.$Message.success('提交成功!');
              //输出查看sub数据格式
              console.log(sub);
              this.$http.post('http://47.93.3.65:8081/api/enterprise',sub).then((res)=> {
                console.log(res);
                //取出id
                var stockholders ={}
                var id = res.data.data.enterpriseId;
                var gdItems = that.formData.gudong.items;
                gdItems.map((item,index,arr)=>{
                  //循环压入
                  stockholders = {
                    enterpriseId:id,
                    name:item.name,
                    idcard:item.idcard,
                    percent:item.percent
                  }
                  this.$http.post('http://47.93.3.65:8081/api/stockholder',stockholders).then((res)=>{
                    console.log('股东成功')
                  }).catch((err)=>{
                    console.log(err);
                  })
                })
                console.log('表单提交成功');
              }).catch( (error)=> {
                console.log(error);
              })
            } else {
              this.$Message.error('表单验证失败!');
            }
          })
        }
      },
      //提交（修改）
      modifySubmit(id){

      },
      //重置
      handleReset (name) {
        this.$refs[name].resetFields();

      },
      handleAdd () {//添加股东,在items数组后面天机
        this.formData.gudong.items.push({
          /*value:''*/
          "idcard":'',
          "name":'',
          "percent":''
        });
      },
      //删除股东
      handleRemove (index) {
        this.formData.gudong.items.splice(index, 1);
      },
      //搜索功能
      search(){
        console.log('这个是查询页面的：'+this.searchName);//props:?怎么把这个值传递给另外一个页面
      },
      next () {
        //应该是每点一下，路由改变
        if (this.current == 3) {
          this.current = 0;
        } else {
          this.current += 1;
        }
      },
      getCompanyInfo(id){
        var url = 'http://47.93.3.65:8081/api/enterprise/'+id;
        this.$http.get(url).then((res)=>{
          console.log(res.data.data);
          //处理数据，然后放入到formData中
         //console.log(this.formData);
          var fd = this.formData
          var gd =  res.data.data
          //设置初始数据
          fd.companyName =gd.name
          fd.companyBirthday =gd.foundTime
          fd.creditCode =gd.creditCode
          fd.neiwaizi =gd.type
          fd.managementRange =gd.mainBusiness
          fd.enterpriseNature =gd.nature
          fd.registeredCapital =gd.registeredCaptial
          fd.legalPersonName =gd.artificialPerson
          fd.legalPersonId =gd.artificialPersonIdcard
          fd.bankName =gd.bankName
          fd.bankIdCard =gd.bankAccout
          //注册地址需要单独处理,转化为数组类型
          fd.registerAddress =JSON.parse(gd.registerAddress)
          //股东
          //先判断有几个股东，然后循环显式多少个输入框子
          if(gd.stockholders.length>0){
            //先清空原始的空数据
            fd.gudong.items = [];
            gd.stockholders.map((item)=>{
              //console.log(item);
              //console.log(index);
              fd.gudong.items.push(item);
            })
          }else{
            console.log('没有股东');
          }

        }).catch((err)=>{
          console.log(err);
        })
      }
    },
    mounted(){

    },
    created(){
      console.log('mounted方法');
      //根据id获取企业信息
      var gsid = this.showState();
      //根据是否有id，显式不同的提交按钮
      //如果id为空
      if(gsid==''){
        //显示新增按钮
        this.hasId=false
        this.companyId='9'
        console.log('整个页面')
        console.log(this.companyId);
      }else{
        this.hasId=true//显示修改按钮,并且执行获取数据函数
        //设置id
        this.companyId = gsid;
        console.log(this)
        this.getCompanyInfo(gsid);
      }
      //(gsid=='')?this.hasId=false:this.hasId=true;
    },
  }
</script>
